<template>
  <div class="card_imginfo">
    <el-card class="box-card">
      <div style="width: 2000px;height: 5vh">
        &nbsp;<i class="el-icon-back" style="color: #409EFF;font-size: 30px; float: left;" @click="pathto('/')"></i>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="font-size: 18px">检测地点:</span><el-input v-model="key.user" size="small" placeholder="请输入检测地点" style="width: 10vw;margin-left: 1vw"></el-input>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="font-size: 18px">是否佩戴头盔:</span><el-input v-model="key.label" size="small" placeholder="请输入是或否" style="width: 10vw;margin-left: 1vw"></el-input>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="primary" style="background-color: #409eff" @click="searchIt()"><i class="el-icon-search"></i></el-button>
      </div>
        <br>
      <div style="display: flex">
        <el-card class="card-container" style="flex: 1">
            <div class="table-container">
          <el-table
              :data="pageList"
              class="custom-table"
              v-loading="loading"
              element-loading-text="数据正在处理中，请耐心等待"
              element-loading-spinner="el-icon-loading"
              lazy
          >
            <el-table-column label="是否佩戴头盔" width="150px" prop="label" align="center">
              <template slot-scope="scope">
                {{ scope.row.label==='head'?'否':'是' }}
              </template>
            </el-table-column>
            <el-table-column label="目标位置" width="80px" prop="position" align="center">
              <template slot-scope="scope">
                {{ myPosition(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column label="置信度" width="160px" prop="zxd" align="center"></el-table-column>
            <el-table-column label="时间" width="200px" prop="curtime" align="center"></el-table-column>
            <el-table-column label="检测地点" width="300px" prop="user" align="center"></el-table-column>
          </el-table>
        </div>
            <div class="pagination-container" v-if="pageList.length > 0">
          <el-button class="pagination-button" type="primary" size="mini" circle @click="paging(curPage - 1)" icon="el-icon-arrow-left"></el-button>
          <el-button class="pagination-button" type="primary" size="mini" circle @click="paging(curPage)">&nbsp;{{ curPage}}&nbsp;</el-button>
          <el-button class="pagination-button" type="primary" size="mini" circle @click="paging(curPage + 1)" icon="el-icon-arrow-right"></el-button>
        </div>
        </el-card>
          <el-card class="box-card" style="flex: 1;margin-left: 2vw">
            <div slot="header" class="clearfix">
                <span>图表</span>
                <el-button style="float: right; padding: 3px 0" type="text">切换</el-button>
            </div>
              <div ref="chart" style="width: 100%; height: 400px;"></div>
          </el-card>
      </div>
    </el-card>

  </div>
</template>

<script>
import axios from "axios";
import * as echarts from 'echarts';


export default {
  name: "history",
  data() {
    return {
      pageList: [],
      loading: false,
      user: {},
      feature_list: [],
      curPage: 1,
        key:{},
        oldList:[],
    };
  },
  created() {
    this.user = JSON.parse(sessionStorage.getItem('user'));
    this.showDataSummarize();
  },
    mounted(){
      // this.renderChart();
    },
  methods: {
      searchIt(){
          this.paging(1);
      },
      renderChart() {
          const chartDom = this.$refs.chart;
          const myChart = echarts.init(chartDom);
          // 处理数据
          var areaHeadMap = new Map();
          var areaUnHeadMap = new Map();
          this.oldList.forEach(item => {
              if (item.label !== 'head') { // 戴头盔
                  if (areaHeadMap.has(item.user)) {
                      areaHeadMap.set(item.user, areaHeadMap.get(item.user) + 1);
                  } else {
                      areaHeadMap.set(item.user, 1); // 初始化为1，而不是2-1，这里看起来是计数，所以初始化为1更合适
                  }
              } else { // 不带头盔
                  if (areaUnHeadMap.has(item.user)) {
                      areaUnHeadMap.set(item.user, areaUnHeadMap.get(item.user) + 1);
                  } else {
                      areaUnHeadMap.set(item.user, 1); // 同上，初始化为1
                  }
              }
          });

          var data = [];
          areaHeadMap.forEach((headCount, user) => {
              var unHeadCount = areaUnHeadMap.get(user) || 0; // 使用逻辑或确保未定义时返回0
              var totalCount = headCount + unHeadCount;
              var percentage = totalCount === 0 ? 0 : (headCount / totalCount * 100).toFixed(2);
              data.push({ user: user, value: percentage });
          });

          console.log(data);
          const option = {
              xAxis: {
                  type: 'category',
                  data: data.map(item => item.user)
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      formatter: '{value}%'
                  }
              },
              color:"#409eff",
              series: [
                  {
                      data: data.map(item => item.value),
                      type: 'bar',
                      label: {
                          show: true, // 显示标签
                          position: 'top', // 标签位置在柱子顶部
                          formatter: '{c}%' // 标签内容格式，{c}代表当前值
                      }
                  }
              ]
          };
          myChart.setOption(option);
      },
    pathto(url){
      this.$router.push(url)
    },

    paging(pagenum) {
      this.feature_list=[...this.oldList];
      if (this.key.label&&this.key.label!=='') {
          var myKey=this.key.label === '否' ? 'head' : 'helmet';
          this.feature_list=this.feature_list.filter(item => item.label === myKey);
          console.log(this.feature_list.length);
      }
        if (this.key.user&&this.key.user!=='') {
            this.feature_list=this.feature_list.filter(item => item.user === this.key.user);
            console.log(this.feature_list.length);
        }
        const len = this.feature_list.length;
      const pages = Math.ceil(len / 10);
      if (pagenum > pages) pagenum = pages;
      if (pagenum < 1) pagenum = 1;
      this.pageList = this.feature_list.slice(pagenum * 10 - 10, pagenum * 10);
      this.curPage = pagenum;
      // this.renderChart();
    },

    showDataSummarize() {
      this.feature_list = [];
      axios.get("http://127.0.0.1:5003/recordList").then(res => {
          this.oldList=res.data;
          this.feature_list=[...this.oldList];
        this.paging(1);
      });
    },
    myPosition(item) {
      const position = item.position;
      const [p1, p2] = position.split("),(");
      const x1 = parseFloat(p1.split(":")[1].split(",")[0]);
      const y1 = parseFloat(p1.split(":")[2].split(")")[0]);
      const x2 = parseFloat(p2.split(":")[1].split(",")[0]);
      const y2 = parseFloat(p2.split(":")[2].split(")")[0]);

      const distance = (x2 - x1) ** 2 + (y2 - y1) ** 2;
      const xSum = x1 + x2;
      const ySum = y1 + y2;

      if (distance <= 1500) {
        if (xSum <= 320 && ySum <= 222) return "左上远处";
        if (xSum <= 320 && ySum <= 444) return "左方远处";
        if (xSum <= 320 && ySum <= 666) return "左下远处";
        if (xSum <= 660 && ySum <= 222) return "上方远处";
        if (xSum <= 660 && ySum <= 444) return "前方远处";
        if (xSum <= 660 && ySum <= 666) return "下方远处";
        if (ySum <= 222) return "右上远处";
        if (ySum <= 444) return "右方远处";
        return "右下远处";
      } else {
        if (xSum <= 320 && ySum <= 222) return "左上";
        if (xSum <= 320 && ySum <= 444) return "左方";
        if (xSum <= 320 && ySum <= 666) return "左下";
        if (xSum <= 660 && ySum <= 222) return "上方";
        if (xSum <= 660 && ySum <= 444) return "前方";
        if (xSum <= 660 && ySum <= 666) return "下方";
        if (ySum <= 222) return "右上";
        if (ySum <= 444) return "右方";
        return "右下";
      }
    }
  },
    watch: {
        pageList: {
            handler() {
                this.renderChart();
            },
            deep: true
        }
    }
};
</script>

<style scoped>
.card_imginfo {
  width: 98vw;
  margin: 10px auto;
  height: 95vh;
  border-radius: 15px;
}

.card-container {
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 49vw;
  margin-left: 2vw;
}

.table-container {
  margin-bottom: 20px;
}

.custom-table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

.custom-table th, .custom-table td {
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
}

.custom-table th {
  background-color: #f5f7fa;
  color: #303133;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination-button {
  margin: 0 5px;
  background-color: #409eff;
  border-color: #409eff;
}

.pagination-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>
